<template>
  <div class="center-page">
    <v-header :user="user" />
    <account :list="account" />
    <div class="sale" v-if="+user.reset_sale === 1">提醒: 您的5倍收益已满, 需要复投,才会有销售(业绩)分红</div>
    <order :count="user.orderCount" />
    <re v-if="false" />
    <swiper :list="center.swiper1" />
    <group />
    <service />
    <tools />
    <swiper :list="center.swiper2" />
    <div class="password" @click="$router.push('/user/re-password')">
      修改密码
    </div>
    <div
      class="card"
      v-if="user.account && user.account.card > 0 && false"
      @click="$router.push('/account/card')"
    >蜜卡: {{user.account.card}}张</div>
    <loading :show="loading" />
    <like />
    <div v-if="open_transfer" class="transfer" @click="$router.push('/service/transfer')">互 转</div>
  </div>
</template>

<script>
import Header from './components/Header'
import Order from './components/Order'
import Group from './components/Group'
import Swiper from './components/Swiper'
import Service from './components/Service'
import Tools from './components/Tools'
import Account from './components/Account'
import Re from './components/Re'

import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import Like from '@/views/product/components/Like'

import { isWxBrowser } from '@/util/wx'

export default {
  name: 'Center',
  components: {
    'v-header': Header,
    Order,
    Group,
    Swiper,
    Service,
    Tools,
    Account,
    Loading,
    Like,
    Re
  },
  data() {
    return {
      // user info
      user: {
        account: {},
        level: {},
        orderCount: {}
      },
      loading: false,
      // user account list
      account: [],
      // center cache
      center: {
        swiper1: [],
        swiper2: []
      },
      open_transfer: false
    }
  },
  methods: {
    /**
     * Get user info
     * [no cache]
     */
    getUserInfo() {
      this.loading = true
      api.User.getInfo().then(response => {
        let { data } = response
        data = base64.parse(data)
        // wx avatar
        if (!data.openid || !data.avatar) {
          this.getAvatar(data)
        }
        this.open_transfer = data.open_transfer
        this.$store.dispatch('ExecUser/set_info', data).then(() => {
          this.user = data
          this.user.orderCount = data.order_count
          // account
          if (data.account) {
            const account = data.account
            // const balance = Number.parseFloat(+account.balance + +account.await_balance) || 0
            const balance = Number.parseFloat(+account.balance) || 0
            this.account = [
              { total: +balance.toFixed(2), text: '余额', url: 'balance' },
              // { total: Number.parseFloat(account.platform_ticket) || 0, text: '优惠劵', url: 'platform-ticket' },
              // { total: Number.parseFloat(account.ticket) || 0, text: '购物券', url: 'ticket' },
              { total: Number.parseFloat(+account.score + +account.tmp_score) || 0, text: '积分', url: 'score' },
              // { total: data.order || 0, text: '订单', url: 'order' },
              { total: data.team || 0, text: '团队', url: 'team' },
            ]
          }
        })
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * get uni group data (swiper & category)
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    fetchData() {
      const data = this.$store.getters['Center/center']
      if (data === null) {
        this.loading = true
        api.Uni.centerPage().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Center/set_data', data).then(() => {
            this.center = data
          })
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.center = data
      }
    },
    getAvatar(data) {
      // const domain = process.env.VUE_APP_BASE_API
      const domain = window.location.origin
      // openid redirect params
      const redirect = base64.encode(this.$route.path)
      api.Wx.getOpenid({
        user_id: data.id,
        redirect_url: domain + '/user/openid/' + redirect,
        user_info: true
      }).then(response => {
        const { data } = response
        if (!data.openid) {
          if (process.env.NODE_ENV !== 'dev' && isWxBrowser()) {
            window.location = data.url
          }
        }
      })
    }
  },
  created () {
    // this.getUserInfo()
    this.fetchData()
  },
  activated () {
    // keep-alive cache update
    this.getUserInfo()
  }
}
</script>

<style scoped lang="stylus">
.center-page
  position relative
  .password, .card
    background $main_color
    position absolute
    width 60px
    height 22px
    line-height 22px
    border-radius 5px
    color white
    top 10px
    right 10px
  .card
    top 70px
    background white
    color red
    font-weight 700
    padding 2.5px 10px
    border-radius 10px
    opacity 0.85
  .sale
    margin 10px
    background white
    padding 10px
    border-radius 10px
    text-align left
    color $main_color

.transfer
  position absolute
  background red
  color white
  width 50px
  height 25px
  line-height 25px
  top 50px
  right 10px
  border-radius 5px
</style>
